<template>
  <div class="desc-wrap">
    <common-title-bar :always="true" :isShowMoreOption="platform != 2"></common-title-bar>
    <div class="desc">
      <h2 class="desc-title">宝姐家会员等级</h2>
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <th>宝姐家会员等级</th>
          <th>会员门槛</th>
        </tr>
        <tr>
          <td>宝迷</td>
          <td>0&lt;消费金额&lt;5000</td>
        </tr>
        <tr>
          <td>铁杆宝迷</td>
          <td>5000≤消费金额&lt;10000</td>
        </tr>
        <tr>
          <td>忠实宝迷</td>
          <td>10000≤消费金额&lt;50000</td>
        </tr>
        <tr>
          <td>名媛</td>
          <td>50000≤消费金额&lt;300000</td>
        </tr>
        <tr>
          <td>风尚名媛</td>
          <td>300000≤消费金额&lt;1000000</td>
        </tr>
        <tr>
          <td>至尊名媛</td>
          <td>1000000≤消费金额</td>
        </tr>
      </table>
      <h2>如何升级/降级保级</h2>
      <div>
        <p>1、会员满足相应等级条件即可升级；</p>
        <p>2、退款后，导致消费金额不足的当前等级的门槛时，将按照会员门槛降级处理；</p>
        <p>3、保持当前消费金额，会员等级终身保级</p>
      </div>
      <h2>等级有效期</h2>
      <div>
        <p>指会员享受折扣与权益的有效期；满足相应等级条件下终身有效。</p>
      </div>
      <h2>其他说明</h2>
      <div>
        <p>1、会员等级不同享受的权益不同，等级越高享受权益越多，具体权益已当日活动为准；
        </p>
        <p>2、会员等级权益仅限本人使用，宝姐家有权撤销、冻结会员使用资格，请规范使用。
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import CommonTitleBar from '@/components/CommonTitleBar'
import { mapState } from "vuex";
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState({
      platform: "platform"
    })
  },
  components: {
    CommonTitleBar
  }
};
</script>
<style lang="less" scoped>
.desc-wrap{
  width: 100%;
  min-height: 100vh;
  background: #F5F5F5;
  display: flex;
  flex-direction: column;
  padding-top: calc(constant(safe-area-inset-top) + 44px); /* 兼容 iOS < 11.2 */
  padding-top: calc(env(safe-area-inset-top) + 44px);

  .desc{
    padding: 0 0.3rem;
    flex: 1;
    margin-top: 0.2rem;
    background: #fff;
    padding-bottom: 1rem;

    >h2{
      font-size: 0.3rem;
      color: #000;
      margin: 0.4rem 0 0.1rem;
      line-height: 1;
    }
    .desc-title{
      margin: 0.28rem 0;
    }
    table{
      width: 100%;
      border-top: 1px solid #E1E1E1;
      border-left: 1px solid #E1E1E1;
      margin-bottom: 0.5rem;

      th{
        font-size: 0.3rem;
        color: #000;
        background: #F5F5F5;
        text-align: center;
        height: 0.7rem;
        border-right: 1px solid #E1E1E1;
        border-bottom: 1px solid #E1E1E1;
      }
      td{
        font-size: 0.28rem;
        color: #383838;
        text-align: center;
        height: 0.7rem;
        border-right: 1px solid #E1E1E1;
        border-bottom: 1px solid #E1E1E1;
      }
    }
    >div >p{
      font-size: 0.26rem;
      color: #383838;
    }
  }
}
</style>
